<!-- 颜色 -->
<template>
	<view>
		<hx-navbar ref="hxnb" :config="config" @clickBtn="clickBtn">
			<view slot="bottom">
				<template>
					<view class="input-product">
						<u--input customStyle="height:100%;width: 90%;margin: auto;" placeholderStyle="color: #fff;"
							placeholder="搜索或添加颜色" border="none" color="#fff" shape="circle" v-model="params.data.keywords"
							@confirm="searchChange">
							<clIcon slot="prefix" type="icon-sousuo_o" color="#fff" size="25"></clIcon>
						</u--input>
					</view>
				</template>
			</view>
		</hx-navbar>
		<view class="u-page m-t-140">
			<view class="color-list">
				<u-checkbox-group v-model="checkboxValues" placement="column">
					<u-checkbox :customStyle="{
						height: '80rpx',
						fontSize: '28rpx',
						borderBottom: '1rpx solid #eee',
						lineHeight: '80rpx',
						padding: '0 20rpx'
					}" v-for="(item, index) in list" :key="index" :label="item.colorNumber" :name="item.id">
					</u-checkbox>
				</u-checkbox-group>
			</view>
		</view>
		<!-- 添加颜色模态框 -->
		<u-popup class="u-pop" :show="show" :round="10" mode="center" :closeOnClickOverlay="false">
			<view class="popup-view">
				<view class="title">
					{{ isEdit ? '编辑颜色' : '新增颜色' }}
				</view>
				<view class="form-view m-b-40">
					<view class="form-item">
						<view class="label">
							色号
						</view>
						<view class="value">
							<u--input border="surround" v-model="addColorParams.colorNumber"></u--input>
						</view>
					</view>
					<view class="form-item">
						<view class="label">
							颜色
						</view>
						<view class="value">
							<u--input border="surround" v-model="addColorParams.color"></u--input>
						</view>
					</view>
					<view class="form-item">
						<view class="label">
							色系
						</view>
						<view class="value" @click="toColorSys">
							<u--input :disabled="true" disabledColor="#fff" border="surround"
								v-model="addColorParams.colorSystem" suffixIcon="arrow-down"
								suffixIconStyle="color: #909399"></u--input>
						</view>
					</view>
					<view class="form-item" @click="toConverter">
						<view class="label">
							加工商
						</view>
						<view class="value">
							<u--input border="surround" :disabled="true" disabledColor="#fff"
								v-model="addColorParams.processorName" suffixIcon="arrow-down"
								suffixIconStyle="color: #909399"></u--input>
						</view>
					</view>
					<view class="form-item">
						<view class="label">
							起订量
						</view>
						<view class="value">
							<u--input border="surround" v-model="addColorParams.startOrderQuantity"></u--input>
						</view>
					</view>
				</view>
				<view class="bot-view flex flex-sa">
					<view class="btn" @click="onCencal">
						取消
					</view>
					<view class="btn" @click="onBatch" v-if="!isEdit">
						批量新增
					</view>
					<view class="btn" @click="onConfirm">
						确认
					</view>
				</view>
			</view>
		</u-popup>
		<!-- 批量生成 -->
		<u-popup :show="batchShow" :round="10" :closeOnClickOverlay="false" mode="center">
			<view class="popup-view">
				<view class="title">
					批量生成
				</view>
				<view class="form-view m-b-40">
					<view class="form-item">
						<view class="label">
							色号
						</view>
						<view class="value flex">
							<u--input border="surround" v-model="batchParams.startNumber"></u--input>
							<text class="p-r-20 p-l-20">-</text>
							<u--input border="surround" v-model="batchParams.endNumber"></u--input>
						</view>
					</view>
					<view class="form-item">
						<view class="label">
							前缀
						</view>
						<view class="value">
							<u--input border="surround" v-model="batchParams.prefix"></u--input>
						</view>
					</view>
					<view class="form-item">
						<view class="label">
							后缀
						</view>
						<view class="value">
							<u--input border="surround" v-model="batchParams.suffix"></u--input>
						</view>
					</view>
					<view class="form-item">
						<view class="label">
							色系
						</view>
						<view class="value" @click="toColorSys">
							<u--input :disabled="true" disabledColor="#fff" border="surround" v-model="colorSystem"
								suffixIcon="arrow-down" suffixIconStyle="color: #909399"></u--input>
						</view>
					</view>
				</view>
				<view class="bot-view flex flex-sa">
					<view class="btn" @click="onBatchCencal">
						取消
					</view>
					<view class="btn" @click="onBatchConfirm">
						确定
					</view>
				</view>
			</view>
		</u-popup>
		<!-- 下一步 -->
		<view class="bottom">
			<u-button class="opt" type="primary" text="下一步" @click="nextStep"></u-button>
		</view>
	</view>
</template>

<script>
import clIcon from "@/components/cl-icon/cl-icon.vue";
import {
	listBySpuId,
	deleteById,
	updateBatch,
	saveBatch,
	getById
} from "@/apis/inventory/color";
export default {
	components: {
		clIcon,
	},
	data() {
		return {
			config: {
				title: "选择颜色",
				color: "#ffffff",
				//背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
				backgroundColor: [1, ["#409EFF", "#409EFF", "#60b4f6", "#60b4f6"]],
				rightButton: [
					{
						key: "btn1",
						icon: "&#xe727;",
						position: "left",
					},
				],
			},
			// 颜色列表
			list: [],
			// 显示模态框
			show: false,
			value: '',
			params: {
				data: {
					spuId: '',
					keywords: ""
				},
				page: {
					current: 1,
					size: 999
				}
			},
			// 新增颜色参数
			addColorParams: {
				colorNumber: '',
				color: '',
				colorSystemId: '',
				colorSystemName: '',
				processorId: '',
				processorName: '',
				startOrderQuantity: '',
				spuId: ''
			},
			// 是否显示批量生成弹框
			batchShow: false,
			batchParams: {
				startNumber: 12,
				endNumber: '',
				prefix: '',
				suffix: '#',
				colorSystemId: ''
			},
			// 色系
			colorSystem: '',
			isEdit: false,
			index: '',

			checkboxValues: [],
			allCheck: ['false']
		};
	},
	computed: {},
	onLoad() {
		const { name, code } = this.$Route.query
		this.config.title = `${code} ${name}`

		this.params.data.spuId = this.$Route.query.spuid;
		this.addColorParams.spuId = this.$Route.query.spuid;
		this.initData();
	},
	onShow() {
		// 获取色系数据
		uni.$on('on-color-data', (res) => {
			console.error(res)
			this.colorSystem = res.label
			if (this.show) {
				this.addColorParams.colorSystemId = res.value;
			} else if (this.batchShow) {
				this.batchParams.colorSystemId = res.value;
			}
			uni.$off('on-color-data')
		})
	},
	methods: {
		// 跳转加工商
		toConverter() {
			uni.navigateTo({
				url: '/pages/application/pages/cloth/converter/index',
				query: {
					type: 'list'
				}
			})
		},
		// 获取数据
		initData() {
			// 1. 查询列表信息
			listBySpuId(this.params).then((res) => {
				if (!res.flag) return;
				this.list = res.data.records;
			});
		},
		scrolltolower() { },
		searchChange() {
			this.list = [];
			this.params.page.current = 1;
			this.initData();
		},
		clickBtn(item) {
			if (item.key === "btn1") {
				this.show = true
				this.isEdit = false
				this.colorSystem = ''
			}
		},
		// 取消
		onCencal() {
			this.show = false;
			this.onReset()
			console.error(this.$refs.swipe[this.index])
			this.$refs.swipe[this.index] && this.$refs.swipe[this.index].reset()
		},
		// 确认新增
		onConfirm() {
			if (!this.addColorParams.colorNumber) {
				uni.showToast({
					title: '色号不能为空',
					icon: 'none'
				})
				return
			}
			if (this.isEdit) {
				updateBatch([this.addColorParams]).then(res => {
					if (!res.flag) return;
					this.onCencal();
					uni.showToast({
						title: '编辑成功'
					})
					this.initData()
				})
			} else {
				saveBatch([this.addColorParams]).then(res => {
					if (!res.flag) return;
					this.onCencal();
					uni.showToast({
						title: '添加成功'
					})
					this.initData()
				})
			}

		},
		// 打开批量新增
		onBatch() {
			this.batchShow = true;
			this.show = false
			this.colorSystem = ''
		},
		// 批量取消
		onBatchCencal() {
			this.batchShow = false;
			this.onReset()
		},
		// 批量确定
		onBatchConfirm() {
			const dataObj = this.batchParams || {}
			const startNumber = dataObj.startNumber
			const endNumber = dataObj.endNumber
			const prefix = dataObj.prefix || ''
			const suffix = dataObj.suffix || ''
			const colorSystemId = dataObj.colorSystemId
			const colorSystemName = this.colorSystem
			const tableData = []
			for (let i = startNumber; i <= endNumber; i++) {
				const colorNumber = `${prefix}${i}${suffix}`
				const row = { colorNumber, colorSystemId, colorSystemName, spuId: this.addColorParams.spuId }
				tableData.push(row)
			}
			saveBatch(tableData).then(res => {
				if (!res.flag) return;
				this.onBatchCencal();
				uni.showToast({
					title: '批量添加成功'
				})
				this.initData()
			})
		},
		// 跳转色系
		toColorSys() {
			this.$Router.push({
				name: 'inventoryQuantityColorSys'
			})
		},
		// 重置
		onReset() {
			this.batchParams = {
				startNumber: 12,
				endNumber: '',
				prefix: '',
				suffix: '#',
				colorSystemId: ''
			}
			this.addColorParams.colorSystemId = ''
		},
		nextStep() {
			if (!this.checkboxValues.length) return uni.showToast({
				title: '请选择颜色',
				icon: 'none'
			})

			const { name, code } = this.$Route.query
			uni.navigateTo({
				url: `pages/application/pages/cloth/sales-offer-color-price/index?name=${name}&code=${code}`
			})
		}
	},
};
</script>

<style lang="scss" scoped>
.input-product {
	width: 95%;
	padding: 0 20upx;
	margin: 30upx auto;
	border: 1px solid #fff;
	border-radius: 50upx;
	height: 70upx;
	line-height: 70upx;
	color: #fff;
	display: flex;
}

.color-list {
	background-color: #fff;
}

.bottom {
	position: fixed;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding: 0 20rpx;
	width: 100%;
	height: 100rpx;
	background-color: #ffffff;

	.opt {
		width: 300rpx;
		margin: 0;
		border-radius: 10rpx;
	}
}
</style>
